<template>
    <div style="width: 100%; height: 100%;position: relative;">
        <div
            style="display: flex;justify-content: space-between;position: absolute;top: 18px;width: 100%;padding: 0 20px;box-sizing: border-box;z-index: 1000;">
            <div style="font-weight: 700;font-size: 18px;">排放情况</div>
            <div style="display: flex;">
                <div :class="['type_btn mr-8', activeType == 1 ? 'activeType' : '']"
                    @click="typeChange(1)">污 水</div>
                <div :class="['type_btn mr-8', activeType == 2 ? 'activeType' : '']"
                    @click="typeChange(2)">固 废</div>
                <div :class="['type_btn', activeType == 3 ? 'activeType' : '']"
                    @click="typeChange(3)">废 气</div>
            </div>
        </div>
        <div ref="charts" style="width: 100%; height: 100%;"></div>
    </div>
</template>

<script>
// 导入 ECharts
import * as echarts from 'echarts'

export default {
    name: 'ECharts',
    data() {
        return {
            items: [],
            activeType: 1
        }
    },
    mounted() {
        this.initChart()
    },
    methods: {
        typeChange(type) {
            this.activeType = type
            this.initChart()
        },
        // 初始化图表
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = echarts.init(this.$refs.charts)
            // 指定图表的配置项和数据
            const option_v1 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: 65,
                    right: 40,
                    bottom: 40,
                    left: 90
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dotted',
                            color: 'rgba(255, 255, 255,0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['一号排水口', '二号排水口', 'A区排水口', 'B区排水口', 'C区排水口'],
                    axisLabel: {
                        textStyle: {
                            color: "rgba(219,225,255,1)",
                            margin: 15,
                        }
                    },
                    splitNumber: 5,

                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: [3605, 2560, 2863, 3645, 1985],
                        barWidth: '30%',
                        label: {
                            show: true,
                            position: 'outside'
                        },
                        itemStyle: {
                            borderRadius: [0, 10, 10, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#4E68B9' },
                                { offset: 1, color: '#73C0DE' }
                            ])
                        },
                    },
                ]
            };
            const option_v2 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: 65,
                    right: 40,
                    bottom: 40,
                    left: 90
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dotted',
                            color: 'rgba(255, 255, 255,0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['食堂排期孔', '配电房排气孔', '监控室排气孔', '仓库排气孔', '1号排气孔'],
                    axisLabel: {
                        textStyle: {
                            color: "rgba(219,225,255,1)",
                            margin: 15,
                        }
                    },
                    splitNumber: 5,

                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: [365, 258, 754, 452, 924],
                        barWidth: '30%',
                        label: {
                            show: true,
                            position: 'outside'
                        },
                        itemStyle: {
                            borderRadius: [0, 10, 10, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#35EC85' },
                                { offset: 1, color: '#91CC75' }
                            ])
                        },
                    },
                ]
            };
            const option_v3 = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: 65,
                    right: 40,
                    bottom: 40,
                    left: 90
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dotted',
                            color: 'rgba(255, 255, 255,0.3)'
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data: ['车库', '机房', '电控室', '办公区', '食堂'],
                    axisLabel: {
                        textStyle: {
                            color: "rgba(219,225,255,1)",
                            margin: 15,
                        }
                    },
                    splitNumber: 5,

                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: [7892, 9985, 10080, 8624, 9936],
                        barWidth: '30%',
                        label: {
                            show: true,
                            position: 'outside'
                        },
                        itemStyle: {
                            borderRadius: [0, 10, 10, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#DB737F' },
                                { offset: 1, color: '#EE6666' }
                            ])
                        },
                    },
                ]
            };
            myChart.setOption(this.activeType == 1 ? option_v1 : this.activeType == 2 ? option_v2 : option_v3)
        },
    }
}
</script>
<style>
    .mr-8{
        margin-right: 8px
    }
    .type_btn {
        padding: 3px 8px;
        background-color: #A2A2A2;
        color: #dcdcdc;
        border-radius: 3px;
        cursor: pointer;
    }
    .activeType{
        background-color: azure;
        color: #333;
    }
</style>